<template>
  <div id="app">
     <!-- 导航 -->
        <nav class="navbar navbar_default navbar-fixed-top">
            <div class="container-fluid">
                 <!-- Brand and toggle get grouped for better mobile display -->
                <div class="navbar-header">
                    <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
                        <span class="sr-only">Toggle navigation</span>
                        <span class="icon-bar"></span>
                        <span class="icon-bar"></span>
                        <span class="icon-bar"></span>
                    </button>
                    <a class="navbar-brand" href="#">
                        <span>
                            <img src="./assets/hghotel_image/logo.png" alt=""  style="position:relative;z-index:10;margin-top:-25px;" class="hidden-xs hidden-sm hidden-md">
                            <!-- 适配pad -->
                            <img src="./assets/hghotel_image/logo.png" alt=""  style="position: relative;width: 70px;z-index: 10;margin-top: -18px;margin-left: -40px;" class="hidden-xs hidden-md hidden-lg">
                            <!-- 适配手机 -->
                            <img src="./assets/hghotel_image/logo_pc2.png" alt=""  style="height:55px;position:relative;z-index:10;" class="hidden-lg hidden-sm">
                        </span>
                    </a>
                    <!-- 手机端显示电话 -->
                    <a href="tel://053285800000" class="nav-tel hidden-lg hidden-md hidden-sm glyphicon glyphicon-earphone" role="button"></a>
                </div>
                 
                <!-- Collect the nav links, forms, and other content for toggling -->
                <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1" style="1100px">
                    <ul class="nav navbar-nav">
                        <li @click="aCollapse()"><router-link to="/home">网站首页</router-link></li>
                        <li @click="aCollapse()"><router-link to="/kffw">客房服务</router-link></li>
                        <li @click="aCollapse()"><router-link to="/cyfw">餐饮服务</router-link></li>
                        <li @click="aCollapse()"><router-link to="/swhy">商务会议</router-link></li>
                        <!-- <li @click="aCollapse()"><router-link to="/zxyd">在线预订</router-link></li> -->
                        <li @click="aCollapse()"><router-link to="/zdwm">找到我们</router-link></li>
                        <li @click="aCollapse()"><router-link to="/gywm">关于我们</router-link></li>
                    </ul>
                    <span class="nav-tel-pc hidden-xs hidden-sm hidden-md">订房热线:0532-85800000</span>
                </div><!-- /.navbar-collapse -->
            </div>
            
        </nav>
        <router-view></router-view>
        <pub-bottom></pub-bottom>
        <pub-bottom-phone></pub-bottom-phone>
        
  </div>
</template>

<script>
import pubBottom from './components/component/pubBottom'
import pubBottomPhone from './components/component/pubBottomPhone'
export default {

    name: 'App',
    components: {
        pubBottom,
        pubBottomPhone
    },
    mounted(){

    },
    methods:{
    //   手机折叠导航点击a链接收起折叠板
        aCollapse(){
            if($('button.navbar-toggle').css('display')!='none'){
            $('button.navbar-toggle').click(); 
            }
        }
    }
}
</script>

<style>
.router-link-active {
    border-bottom: 3px solid #8f4290;
}
  #app {
    font-family: 'Avenir', Helvetica, Arial, sans-serif;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-align: center;
    color: #2c3e50;
    padding-top:80px;
  }
  @media (max-width: 1200px) {
      /* 手机底部padding */
      #app{
          padding-bottom: 80px;
      }
  }
  .navbar_default {
      background-color: #fff;
      margin-bottom: 0px;
      padding-left:5rem;
  }
  .navbar_default .navbar-brand {
      color: #777;
      height: 80px;
      line-height: 50px;
  }
  .navbar_default .navbar-brand>span>image{
      display: block;
      z-index: 100;
  }
  .navbar_default .navbar-brand:hover,
  .navbar_default .navbar-brand:focus {
      color: #5e5e5e;
      background-color: transparent;
  }
  .navbar_default .navbar-text {
      color: #777;
  }
  .navbar_default .navbar-nav > li > a {
      color: #777;
      height: 80px;
      line-height: 50px;
      font-size: 18px;
  }
  .navbar_default .navbar-nav > li > a:hover,
  .navbar_default .navbar-nav > li > a:focus {
      color: #333;
      background-color: transparent;
      border-bottom:3px solid #8f4290;
  }
  .navbar_default .navbar-nav > .active > a,
  .navbar_default .navbar-nav > .active > a:hover,
  .navbar_default .navbar-nav > .active > a:focus {
      color: #555;
  }
  .navbar_default .navbar-nav > .disabled > a,
  .navbar_default .navbar-nav > .disabled > a:hover,
  .navbar_default .navbar-nav > .disabled > a:focus {
      color: #ccc;
      background-color: transparent;
  }
  .navbar_default .navbar-toggle {
      margin-top: 23px;
      border-color: #ddd;
  }
  .navbar_default .navbar-toggle:hover,
  .navbar_default .navbar-toggle:focus {
      background-color: #ddd;
  }
  .navbar_default .navbar-toggle .icon-bar {
      background-color: #888;
  }
  .navbar_default .navbar_collapse,
  .navbar_default .navbar-form {
      border-color: #e7e7e7;
  }
  .navbar_default .navbar-nav > .open > a,
  .navbar_default .navbar-nav > .open > a:hover,
  .navbar_default .navbar-nav > .open > a:focus {
      color: #555;
      background-color: #e7e7e7;
  }
  /* 电话按钮 */
  .navbar_default .nav-tel-pc{
      display: inline-block;
      padding: 10px 16px;
      border-radius: 4px;
      border: 1px solid  #8f4290;
      color:#000;
      font-size: 14px;
      margin-top:17px;
  }
  /* 电话按钮手机端 */
  .navbar_default .nav-tel{
      display: inline-block;
      padding: 5px;
      /* border-radius: 4px; */
      /* border: 1px solid #8f4290; */
      color: #666;
      font-size: 21px;
      margin-top: 25px;
      margin-right: 20px;
      float: right;
  }
  @media (max-width:1340px) {
      .navbar_default .nav-tel-pc{
        display:none;
      }
  }
  @media (min-width: 1200px) {
      /* 大屏导航位置中间偏移 */
      .navbar_default .navbar-nav{
        margin-left: 60px;
      }
  }
  @media (max-width: 767px) {
      /* 小屏幕nav不加左padding，否则影响下拉条 */
      .navbar_default {
          background-color: #fff;
          margin-bottom: 0px;
          padding-left:0px;
      }
      .navbar_default .navbar-nav{
          background: #bfb0c733;
          margin-top:0;
          margin-bottom: 0;
      }
      .navbar_default .navbar-nav > li > a {
          display: block;
          color: #777;
          font-size:15px;
          height: 45px;
          line-height: 45px;
          padding: 0px;
          border-top:1px solid #f9f9f9;
      }
      .navbar_default .navbar-nav > .active > a,      
      .navbar_default .navbar-nav > li > a:hover,
      .navbar_default .navbar-nav > li > a:focus {
          color: rgb(14, 13, 13);
          background-color: transparent;
          border-bottom:none;
      }
      .navbar_default .navbar-nav .open .dropdown-menu > li > a {
          color: #777;
      }
      .navbar_default .navbar-nav .open .dropdown-menu > li > a:hover,
      .navbar_default .navbar-nav .open .dropdown-menu > li > a:focus {
          color: #333;
          background-color: transparent;
          border-bottom:none;
      }
      .navbar_default .navbar-nav .open .dropdown-menu > .active > a,
      .navbar_default .navbar-nav .open .dropdown-menu > .active > a:hover,
      .navbar_default .navbar-nav .open .dropdown-menu > .active > a:focus {
          color: #555;
          background-color: #e7e7e7;
      }
      .navbar_default .navbar-nav .open .dropdown-menu > .disabled > a,
      .navbar_default .navbar-nav .open .dropdown-menu > .disabled > a:hover,
      .navbar_default .navbar-nav .open .dropdown-menu > .disabled > a:focus {
          color: #ccc;
          background-color: transparent;
      }
  }
  .navbar_default .navbar-link {
      color: #777;
  }
  .navbar_default .navbar-link:hover {
      color: #333;
  }
  .navbar_default .btn-link {
      color: #777;
  }
  .navbar_default .btn-link:hover,
  .navbar_default .btn-link:focus {
      color: #333;
  }
  .navbar_default .btn-link[disabled]:hover,
  fieldset[disabled] .navbar_default .btn-link:hover,
  .navbar_default .btn-link[disabled]:focus,
  fieldset[disabled] .navbar_default .btn-link:focus {
      color: #ccc;
  }
 
</style>
